<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:漫画模块 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->


<template>
	<view>
		<view class="content">
			<view class="search">
				<view class="search-content">
					<view class="search">
			
						<view class="search-btn">
				
						</view>
					</view>
				</view>
			</view>
			<view class="menu-content">
				<u-tabs :list="list" bg-color="#FFDA33" :active-item-style="{
							'fontSize':'40rpx',
							'color':'#333',
						}" active-color="#FFDA33" height="60" gutter="15" :current="current" @change="change"></u-tabs>
			</view>


		</view>

		<view class="menu-content tabs">
			<u-tabs :list="list2" :show-bar="false" active-color="#FFDA33" :inactiveStyle="{'width':'150rpx',
						 'height':'60rpx'}" height="60" gutter="15" :current="current2" @change="changeSelect"></u-tabs>
		</view>
		<!-- 小说 -->
<!-- 		<view>
			<view class="book-li" v-for=" (item2,index) in bookList" :key="index" v-if='index==0'>
				<view class="book-left-item">
					<image :src="item2.cover" mode="aspectFill"></image>
				</view>
				<view class="book-right-i">
					<view class="book-title">
						<view>{{item2.name}}</view>
						<view class="book-text">
							{{item2.intro}}
						</view>
					</view>
				</view>
			</view>

		</view> -->
		<!-- 小说 end-->
		<view class="books-list">
			<view class="books-list-item" v-for=" item in bookList" @click="bookMore(item)">
				<view class="book-read-img">

					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="books-read-title">{{item.name}}</view>
			</view>
			<view class="nav-bar">
				<nav-bar></nav-bar>
			</view>

		</view>
	</view>
</template>
<script>
	import NavBar from '@/components/v-tabbar/v-tabbar.nvue'
	import {
		getBookFl,
		getBookList
	} from '@/common/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				cartoon: {
					model_id: 2,
				},
				current: 0,
				current2: 0,
				keyword: "",
				bookList: [],
				bookDate: {
					module_id: 2,
					type_id: [3],
				},
				list: [], //一级分类
				list2: [], //二级分类

			};
		},
		onLoad(option) {
			this.data.category_id = option.id
		},
		onShow() {
			//一级分类
			this.getList();
			this.getBookList();
		},
		methods: {

			//跳转详情
		bookMore(e) {
			
			uni.navigateTo({
				url: '/pages/novel/comicsDefault?id=' + e.id
		
			});
		},

			//一级分类筛选
			change(index) {
				this.current = index;
				this.current2=0;
				this.getClassification(this.list[this.current].id, this.current2)


			},
			//二级筛选
			changeSelect(index) {
				var arr = [];
				this.current2 = index;
				var id = this.list2[index].id;
				arr.push(id)
				this.bookDate.type_id = arr;
				this.getBookList();
			},
			//精选分类
			getClassification(id, index) {
				var data = {
					pid: id
				}
				getBookFl(data).then(res => {
					if (res.code == 200) {
						this.list2 = res.data;
						this.changeSelect(index)
					}
				})
			},
			//分类列表
			getList() {
				getBookFl(this.cartoon).then(res => {
					if (res.code == 200) {
						this.list = res.data;
						this.getClassification(this.list[0].id.toString(),0)
					}
				})
			},
			getBookList() {
				getBookList(this.bookDate).then(res => {
					if (res.code == 200) {
						this.bookList = res.data

					}
				})
			},

		},
	}
</script>

<style>
	@import './index.css';

/* 	.book-li {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.content {
		background-color: #fff;
	}

	.search {
		padding-top: 50rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		display: flex;
		justify-content: space-between;
	}

	.search-content {
		width: 98%;
		margin-right: 2%;
	}

	.search-add {
		color: red;
		text-align: center;
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 52rpx;
		border-radius: 50%;

		font-size: 20rpx;
		color: red;
	}

	.search-btn {
		text-align: center;
	}

	.search-text {
		font-size: 20rpx;
		color: #fff;
	}

	.classification-box {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.classification-title {
		font-size: 40rpx;
		f ont-weight: bold;
	}*/
	
	.book-li {
		display: flex;
	}
	
	page {
		background-color: #fff;
	}
	
	.content {
		background-color: #FFDA33;
	}
	
	.search {
		padding-top: 50rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	
		display: flex;
		justify-content: space-between;
	}
	
	.search-content {
		width: 98%;
		margin-right: 2%;
	}
	
	.search-add {
		color: red;
		text-align: center;
		margin-left: 10rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 52rpx;
		border-radius: 50%;
		
		font-size: 20rpx;
		color: red;
	}
	
	.search-btn {
		text-align: center;
	}
	
	.search-text {
		font-size: 20rpx;
		color: #fff;
	}
	
	.classification-box {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	
	.classification-title {
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.tabs ::v-deep .u-tab-item {
		width: 100rpx !important;
		height: 60rpx !important;
		border-radius: 30rpx !important;
		background-color: #F5F6F8 !important;
		margin-right: 30rpx !important;
	}
	.nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.tabs ::v-deep .u-tab-item {
		width: 100rpx !important;
		height: 60rpx !important;
		border-radius: 30rpx !important;
		background-color: #F5F6F8 !important;
		margin-right: 30rpx !important;
	}

	.nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.books-read-title{
		text-align: center !important;
		margin-top: 15rpx;
	}
	.books-list-item{
		width: 32% !important;
	}
	.book-read-img{
		
		height: 300rpx !important;
	}
	.book-read-img image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
</style>
